<template>
  <div>
<!--    页面主体-->
    <el-card>
<!--      头部区域-->
      <div>
        <el-form inline>
          <el-form-item label="赛事名称">
            <el-input size="small" v-model="searchInput"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="getMatchInfo">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="resetSearchInput">
              重置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="success" @click="dialogVisible=true">
              新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
<!--      表格区域-->
      <div>
        <el-table :data="nowPageData" max-height="500px" border>
          <el-table-column
            type="index"
            align="center"
            label="#"
            width="50px"
          ></el-table-column>
          <el-table-column
            label="赛事名称"
            prop="match_name"
          ></el-table-column>
          <el-table-column
            label="赛事封面"
            prop="match_img"
          >
            <template v-slot="scope">
              <div>
                <el-popover placement="right" trigger="hover">
                  <el-image
                    style="height: 300px"
                    :src="scope.row.match_img"
                    :fit="contain">
                  </el-image>
                  <el-image
                    slot="reference"
                    style="width: 100px;height: 100px"
                    :src="scope.row.match_img"
                    :fit="contain">
                  </el-image>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="报名时间"
            prop="application_time">
          </el-table-column>
          <el-table-column
            label="比赛时间"
            prop="match_time"
          >
          </el-table-column>
          <el-table-column
            label="赛事详情"
            prop="">
            <template v-slot="scope">
              <div>
<!--                详情按钮-->
                <el-button type="text" @click="showEditDialog(scope.row.id);disabledForm=true">
                  查看详情
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template v-slot="scope">
              <el-button size="small" type="primary" @click="showEditDialog(scope.row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="removeMatch(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
<!--      翻页功能区域-->
      <div class="table_foot">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
<!--    新增/编辑表单区域-->
    <div>
      <el-dialog
        :destroy-on-close="true"
        :visible.sync="dialogVisible"
        @close="clearForm"
        width="70%"
        top="5vh"
      >
        <el-form inline :disabled="disabledForm">
          <el-row :gutter="30" type="flex" justify="left" class="form_flex">
            <el-col :span="12">
              <el-form-item label="赛事名称">
                <el-input size="small" v-model="matchForm.match_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赛事封面">
                <Upload
                  ref="upload_match_img"
                  :fp="matchForm.match_img"
                  @imgChange="getImgPath"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名时间">
                <el-date-picker
                  v-model="matchForm.application_time"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="比赛时间">
                <el-date-picker
                  v-model="matchForm.match_time"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="赛事简介">
                <VueQuillEditor
                  :value="matchForm.match_desc"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item class="dialog_button_sty">
                <el-button size="small" type="primary" @click="addOrEdit">保存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Upload from "../../components/Upload.vue";
import VueQuillEditor from "../../components/VueQuillEditor.vue";

export default {
  components: {VueQuillEditor, Upload},
  data(){
    return {
      // 头部搜索框数据
      searchInput:'',
      // 当前页面数据
      nowPageData:[],
      // 全部数据
      tableData:[],
      // 新增编辑弹窗状态
      dialogVisible:false,
      // 表单状态
      disabledForm:false,
      // 当前页码
      current:1,
      // 页面条数
      size:10,
      // 全部条数
      total:0,
      // 新增编辑表单
      matchForm:{
        id:'',
        match_name:'',
        match_img:'',
        match_desc:'',
        match_time:[],
        application_time:[],
      },
      // 默认表单
      defaultMatchForm:{
        id:'',
        match_name:'',
        match_img:'',
        match_desc:'',
        match_time:[],
        application_time:[],
      },
    }
  },
  mounted() {
    this.getMatchInfo()
  },
  methods:{
    // 重置按钮
    resetSearchInput() {
      this.searchInput = ''
    },
    // 查询按钮
    getMatchInfo() {
      this.$axios.get('api/match/info/',{
        params:{match_name:this.searchInput}
      }).then((response)=>{
        const res = response.data
        if (res['respCode'] === '000000'){
          this.tableData = res['list']
          this.nowPageData = this.tableData.slice(
            (this.current-1) * this.size,this.current * this.size
          );
          this.total = this.tableData.length
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    // 点击编辑按钮的回显
    showEditDialog(id) {
      this.dialogVisible=true
      this.$axios.get('api/match/info/',{
        params:{id:id}
      }).then((response)=>{
        const res = response.data
        if (res['respCode'] === '000000'){
          this.matchForm = eval(res['list'][0])
          this.matchForm.match_time = eval(res['list'][0]['match_time'])
          this.matchForm.application_time = eval(res['list'][0]['application_time'])
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    addOrEdit() {
      // 编辑功能
      if (this.matchForm.id){
          this.$axios.post('api/match/add/',{
          form:this.matchForm
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] ==='000000'){
            this.$message.success('修改成功')
            this.dialogVisible=false
            this.getMatchInfo()
          }else {
            console.log(res['respMsg'])
          }
        })
      }else {
        // 新增功能
          this.$axios.post('api/match/add/',{
          form:this.matchForm
        }).then((response)=>{
          const res = response.data
          if (res['respCode']==='000000'){
            this.$message.success('新增成功')
            this.dialogVisible=false
            this.getMatchInfo()
          }else {
            console.log(res['respMsg'])
          }
        })
      }
    },
    removeMatch(id) {
      this.$confirm('确定删除该赛事吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning",
      }).then(()=>{
        this.$axios.get('api/match/del/',{
          params:{id:id}
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] === '000000') {
            this.$message.success('删除成功')
            this.getMatchInfo()
          }else {
            console.log(res['respMsg'])
          }
        })
      })
    },
    // 获取upload组件回传的路径
    getImgPath(filepath,filename) {
      this.matchForm.match_img=filepath
    },
    // 表单关闭后回调函数
    clearForm() {
      this.matchForm = Object.assign({},this.defaultMatchForm)
      this.disabledForm = false
    },
    // 页码更新钩子函数
    handleCurrentChange(val) {
        this.current = val
        this.getMatchInfo()
      },
    // 页面size更新钩子函数
    handleSizeChange(val) {
        this.size = val
        this.current = 1
        this.getMatchInfo()
      },
  },
}
</script>

<style scoped>
.form_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
.dialog_button_sty {
  float: right;
  margin-top: 30px;
}
.el-dialog__wrapper{
  .el-dialog {
    border-radius: 20px;
  }
}
.table_foot {
  float: right;
  margin: 10px;
}
</style>
